<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('列表')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li>
                                <p>SIM卡号：</p>
                                <input type="text" name="simcarnumber"/>
                            </li>
                            <li>
                                <p>ICCID：</p>
                                <input type="text" name="simiCcid"/>
                            </li>
                            <li>
                                <p>SIM卡状态：</p>
                                <input type="text" name="simcardstate"/>
                            </li>
                            <li>
                                <p>车牌号码</p>
                                <input type="text" name="simoperator"/>
                            </li>
                            <li>
                                <p>绑定状态：</p>
                                <input type="text" name="simbindingstate"/>
                            </li>
                            <li>
                                <p>车牌号码</p>
                                <input type="text" name="carId"/>
                            </li>
                            <li>
                                <p>车辆状态：</p>
                                <input type="text" name="simcarstate"/>
                            </li>


                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <div class="btn-group-sm" id="toolbar" role="group">
                <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="system:carmessage:add">
                    <i class="fa fa-plus"></i> 添加
                </a>
                <a class="btn btn-primary single disabled" data-toggle="modal" data-target="#myModal" shiro:hasPermission="system:carmessage:edit">
                    <i class="fa fa-edit"></i> 激活
                </a>
                <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="system:carmessage:remove">
                    <i class="fa fa-remove"></i>停用
                </a>
                <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:carmessage:export">
                    <i class="fa fa-download"></i> 导出
                 </a>
                <button type="button" class="btn btn-primary" onclick="ditu()" >查看地图</button>
            </div>

            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </div>

     <!-- Modal -->
     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
                 <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                     <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                 </div>
                <div>
                    <h3>是否激活</h3>
                </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#shijian" >激活</button>
                 </div>
             </div>
         </div>
     </div>

     <!-- 停用 -->
     <div class="modal fade" id="tingyong" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
                 <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                     <h4 class="modal-title" id="tmyModalLabel">停用</h4>
                 </div>
                 <div>
                     <h3>确定停用当前<td name="shou"></td>手机号吗</h3>
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                     <button type="button" class="btn btn-primary" onclick="yongting()">停用</button>
                 </div>
             </div>
         </div>
     </div>
     <!--地图模块-->
     <div id="container"></div>
     <!-- 时间添加 -->
     <div class="modal fade" id="shijian" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
                 <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                     <h4 class="modal-title" id="smyModalLabel">Modal title</h4>
                 </div>
                 <div>
                     <h3>请输入相关信息</h3>

                     <div class="col-md-12">
                         <div class="form-group">
                             <label class="col-sm-3 control-label">开始时间：</label>
                             <div class="col-sm-9">
                                 <div class="input-group date"> <span class="input-group-addon"><i class="fa fa-calendar"></i></span>

                                     <input type="text" class="form-control" value="2018-04-20">
                                 </div>
                             </div>
                         </div>
                         <div class="form-group">
                             <label class="col-sm-3 control-label">结束时间：</label>
                             <div class="col-sm-9">
                                 <div class="input-group date"> <span class="input-group-addon"><i class="fa fa-calendar"></i></span>

                                     <input type="text" class="form-control" value="2018-04-20">
                                 </div>
                             </div>
                         </div>
                         <div class="form-group">
                             <label class="col-sm-3 control-label">备注：</label>
                             <div class="col-sm-9">
                                 <input type="text" name="" class="form-control" placeholder="请输入文本">
                             </div>
                         </div>
                     </div>
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                     <button type="button" class="btn btn-primary" onclick="jia()">激活</button>
                 </div>
             </div>
         </div>
     </div>


     <!-- 页面详情 -->
     <div class="modal fade" id="yemian" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
                 <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                     <h4 class="modal-title" id="myModalLabell">Modal title</h4>
                 </div>
                 <div>
                     <h3>页面详情</h3>
                     <div class="col-md-12">
                         <div class="form-group">
                             <label class="col-sm-3 control-label">SIM卡号：</label>
                             <div class="col-sm-9">
                                 <input type="text" name="simcarnumber" class="form-control" placeholder="请输入文本">
                             </div>
                         </div>
                         <div class="form-group">
                             <label class="col-sm-3 control-label">ICCID：</label>
                             <div class="col-sm-9">
                                 <input type="text" name="simiCcid" class="form-control" placeholder="请输入文本">
                             </div>
                         </div>
                         <div class="form-group">
                             <label class="col-sm-3 control-label">SIM卡状态：</label>
                             <div class="col-sm-9">
                                 <input type="text" name="simcardstate" class="form-control" placeholder="请输入文本">
                             </div>
                         </div>
                         <div class="form-group">
                             <label class="col-sm-3 control-label">绑定状态：</label>
                             <div class="col-sm-9">
                                 <input type="text" name="simbindingstate" class="form-control" placeholder="请输入文本">
                             </div>
                         </div>
                         <div class="form-group">
                             <label class="col-sm-3 control-label">车牌号码：</label>
                             <div class="col-sm-9">
                                 <input type="text" name="cph" class="form-control" placeholder="请输入文本">
                             </div>
                         </div>
                         <div class="form-group">
                             <label class="col-sm-3 control-label">VIN码：</label>
                             <div class="col-sm-9">
                                 <input type="text" name="vin" class="form-control" placeholder="请输入文本">
                             </div>
                         </div>
                         <div class="form-group">
                             <label class="col-sm-3 control-label">车辆状态：</label>
                             <div class="col-sm-9">
                                 <input type="text" name="simcarstate" class="form-control" placeholder="请输入文本">
                             </div>
                         </div>
                         <div class="form-group">
                             <label class="col-sm-3 control-label">终端编号：</label>
                             <div class="col-sm-9">
                                 <input type="text" name="zdbh" class="form-control" placeholder="请输入文本">
                             </div>
                         </div>
                         <div class="form-group">
                             <label class="col-sm-3 control-label">终端类型：</label>
                             <div class="col-sm-9">
                                 <input type="text" name="zdxh" class="form-control" placeholder="请输入文本">
                             </div>
                         </div>
                     </div>
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">关闭页面</button>
                     <!--<button type="button" class="btn btn-primary" onclick="jia()">激活</button>-->
                 </div>
             </div>
         </div>
     </div>
    <th:block th:include="include :: footer" />
     <th:block th:include="include :: datetimepicker-js" />
     <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=8885f7277c8dd946cfc63a8814fa803b"></script>

     <script th:inline="javascript"  type="text/javascript">
      function ditu() {
          var map = new AMap.Map('container', {
              center: [121.696, 30.870],
              zoom: 11
          })
          AMap.plugin('AMap.ToolBar', function () {
              var toolbar = new AMap.ToolBar();
              map.addControl(toolbar)
          })
      }
         var prefix = ctx + "system/carmessage";
         function ceshi(id){
             sid=id;

         }
        function yongting(){
            $.ajax({
                url:prefix+"/yong",
                type:"get",

                data:{
                    id:yid
                },
                datatype:"json",
                success:function (data) {
                    console.log(data)
                    if(data.msg=="操作成功"){
                        location=prefix + "/tiao";
                    }

                }
            })
        }
         function jia(){

              $.ajax({
                 url: prefix+"/cheshi",
                 type: "GET",
                 data: {
                     id: sid
                 },
                 datatype: "json",
                  success:function(data){
                     console.log(data)
                     if(data.msg=="操作成功"){
                         location=prefix + "/tiao";
                     }
                  }

             })
         }
         /*停用*/
function tingy(id) {
    yid=id
    $.ajax({
        url:prefix+"/xiang",
        type:"get",

        data:{
            id:id
        },
        datatype:"json",
        success:function (data) {
            console.log(data)
            $("[name='shou']").val(data.simcarnumber);
        }
    })
}
         function xiang(id) {
             $.ajax({
                 url:prefix+"/xiang",
                 type:"get",
                 data:{
                     id:id
                 },
                 datatype:"json",
                 success:function (data) {

                     $("[name='simcarnumber']").val(data.simcarnumber);
                     $("[name='simiCcid']").val(data.simiCcid);
                     $("[name='simcardstate']").val(data.simcardstate);
                     $("[name='simbindingstate']").val(data.simbindingstate);
                     $("[name='cph']").val(data.cph);
                     $("[name='vin']").val(data.vin);
                     $("[name='simcarstate']").val(data.simcarstate);
                     $("[name='zdbh']").val(data.zdbh);
                     $("[name='zdxh']").val(data.zdxh);
                 }
             })
         }
         var prefixx = ctx + "demo/modal";
         $("#button-open-6").click(function(){
             $.modal.openTab('SIM卡变更日志', prefixx + "/zidingyi");
         })
         $("#button-open-1").click(function(){
             $.modal.openTab('SIM卡更新日志', prefixx + "/logtiao");
         })
         function log() {
             $.modal.openTab('SIM卡更新日志', prefixx + "/logtiao");
         }
     </script>
    <script th:inline="javascript" type="text/javascript">
        var editFlag = [[${@permission.hasPermi('system:carmessage:edit')}]];
        var removeFlag = [[${@permission.hasPermi('system:carmessage:remove')}]];
        var prefix = ctx + "system/carmessage";

        $(function() {
            $("#datetimepicker-demo-2").datetimepicker({
                format: "yyyy-mm-dd",
                minView: "month",
                autoclose: true
            });
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
                exportUrl: prefix + "/export",
                modalName: "【请填写功能名称】",
                columns: [{
                    checkbox: true
                },
                {
                    field : 'simId',
                    title : 'sim卡编号',
                    visible: false
                },
                {
                    field : 'simcarnumber',
                    title : 'SIM卡号'
                },
                {
                    field : 'simiCcid',
                    title : 'ICCID'
                },
                {
                    field : 'simcardstate',
                    title : 'SIM卡状态',
                    formatter: function(value, row, index) {
                        return value;
                    }
                },
                {
                    field : 'simoperator',
                    title : '运营商'
                },
                {
                    field : 'simbindingstate',
                    title : '绑定状态'
                },
                {
                        field : 'vin',
                        title : '车辆VIN码'
                    },
                    {
                        field : 'cph',
                        title : '车牌号'
                    },
                {
                    field : 'simcarstate',
                    title : '车辆状态'
                },
                {
                    field : 'zdxh',
                    title : '终端型号'
                },
                    {
                        field : 'zdbh',
                        title : '终端编号'
                    },
                {
                    field : 'simlogId',
                    title : '变更日志外键ID'

                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.simId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.simId + '\')"><i class="fa fa-remove"></i>删除</a>');
                        actions.push('<a class="btn btn-success btn-xs ' + removeFlag + '"  onclick="ceshi(\'' + row.simId + '\')" data-toggle="modal" data-target="#myModal"><i class="fa fa-edit"></i>激活</a>');
                        actions.push('<a class="btn btn-success btn-xs ' + removeFlag + '"  onclick="tingy(\'' + row.simId + '\')" data-toggle="modal" data-target="#tingyong"><i class="fa fa-edit"></i>停用</a>');
                        actions.push('<a class="btn btn-success btn-xs ' + removeFlag + '"  onclick="xiang(\'' + row.simId + '\')" data-toggle="modal" data-target="#yemian"><i class="fa fa-edit"></i>详情</a>');
                        actions.push('<a class="btn btn-success btn-xs ' + removeFlag + '"  onclick="log()"><i class="fa fa-edit"></i>详情日志</a>');

                        return actions.join('');
                    }
                }]
            };
            $.table.init(options);
        });
    </script>
</body>
</html>
